<template>
  <div class="app-container" :style="{ backgroundImage: `url(${bgImage})` }">
    <el-form class="form" inline>
      <el-form-item label="模板">
        <el-select style="width: 160px" v-model="form.type">
          <el-option label="模板一" :value="1" />
          <el-option label="模板二" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="handleClick">智能排座</el-button>
      </el-form-item>
    </el-form>

    <el-dialog width="450px" title="选择参会人员" :visible.sync="open" :close-on-click-modal="false">
      <el-cascader
        style="width: 100%"
        :show-all-levels="false"
        :props="cascaderProps"
        :options="cascaderData"
      />
    </el-dialog>
  </div>
</template>

<script>
import { websock } from "@/websock";

export default {
  data() {
    return {
      form: {
        type: 1,
      },
      open: false,
      cascaderProps: {
        multiple: true,
        emitPath: false,
      },
      cascaderData: [],
    };
  },
  computed: {
    bgImage() {
      const { type } = this.form;
      return type == 1
        ? require("../../assets/muban1.png")
        : require("../../assets/muban2.png");
    },
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    handleClick() {
      this.open = true;
    },
    async getUserList() {
      const res = await websock.getContactList();
      const userList = [];
      for (let i = 0; i !== res.length; i++) {
        userList.push({
          value: i + "",
          label: res[i].name,
          children: [],
        });
        for (let j = 0; j !== res[i].userList.length; j++) {
          userList[i].children.push({
            value: res[i].userList[j].uid,
            label: res[i].userList[j].name,
          });
        }
      }
      this.cascaderData = userList;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  background-size: 100% 100%;
  position: relative;
  .form {
    position: absolute;
    left: 40px;
    top: 40px;
  }
}
</style>
